<template>
  <div class="col-span-12 lg:col-span-4 overflow-hidden rounded border border-stone-300">
    <div class="p-4">
      <h3 class="flex items-center gap-1.5 font-medium">
        <!-- SVG placeholder for FiEye -->
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
        Usage
      </h3>
    </div>

    <div class="h-64 px-4 pb-4">
      <Radar :data="chartData" :options="chartOptions" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Radar } from 'vue-chartjs';
import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
  CoreChartOptions,
  ElementChartOptions,
  PluginChartOptions,
  DatasetChartOptions,
  ScaleChartOptions,
  RadarControllerChartOptions
} from 'chart.js';
import type { _DeepPartialObject } from 'chart.js/dist/types/utils';

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

const data = {
  labels: ["Tracking", "Builder", "Schedule", "AI Train", "Interval"],
  datasets: [
    {
      label: 'Mobile',
      data: [15, 130, 86, 125, 148],
      borderColor: '#18181b',
      backgroundColor: 'rgba(24, 24, 27, 0.2)', // fillOpacity 0.2
      borderWidth: 2,
      pointBackgroundColor: '#18181b',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: '#18181b',
    },
    {
      label: 'Desktop',
      data: [110, 90, 130, 40, 90],
      borderColor: '#5b21b6',
      backgroundColor: 'rgba(91, 33, 182, 0.2)', // fillOpacity 0.2
      borderWidth: 2,
      pointBackgroundColor: '#5b21b6',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: '#5b21b6',
    },
  ],
};

const chartData = data;

// Type definition for Chart.js options in Vue Chartjs
type ChartJsOptions = _DeepPartialObject<CoreChartOptions<'radar'> & ElementChartOptions<'radar'> & PluginChartOptions<'radar'> & DatasetChartOptions<'radar'> & ScaleChartOptions<'radar'> & RadarControllerChartOptions>;

const chartOptions: ChartJsOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'bottom',
      labels: {
        font: {
          size: 10, // text-xs
        },
        boxWidth: 10,
        padding: 10,
      }
    },
    tooltip: {
      bodyFont: {
        size: 12, // text-sm
      },
      titleFont: {
        size: 10, // text-xs
      },
      titleColor: '#78716c', // text-stone-500
      boxPadding: 4,
    },
  },
  scales: {
    r: {
      angleLines: {
        display: true,
        color: '#e4e4e7' // PolarGrid color
      },
      suggestedMin: 0,
      suggestedMax: 150,
      grid: {
        color: '#e4e4e7' // PolarGrid color
      },
      pointLabels: {
        font: {
          size: 10, // text-xs
          weight: 'bold',
        },
      },
      ticks: {
        display: false, // Hide radius axis labels like in recharts
        stepSize: 30 // Control grid lines
      }
    },
  },
};

</script>

<style scoped>
/* Add any specific styles for UsageRadar if needed */
</style>